<template>
  <div class="app-container flex flex-sub"
    style="background: none; height: 100%; padding: 1rem">
    <el-card shadow="never"
      class="box-card flex-sub"
      style="overflow: auto">
      <div class="div-query">
        <div class="collapse">
          <div class="collapse-header"
            @click="panelActive = !panelActive">
            <i class="collapse-header-icon"
              :class="[
                panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
              ]" />
            {{ panelActive ? '隐藏' : '展开' }}查询条件
          </div>
          <div class="collapse-content">
            <el-collapse-transition>
              <div v-show="panelActive">
                <el-form size="small"
                  label-position="right">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备编码"
                        label-width="120px">
                        <el-input v-model="searchModel.deviceSource"
                          placeholder="设备编码"
                          clearable
                          class="filter-item search-item" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备名称"
                        label-width="120px">
                        <el-input v-model="searchModel.deviceName"
                          placeholder="设备名称"
                          clearable
                          class="filter-item search-item" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="设备类型"
                        label-width="120px">
                        <el-select v-model="searchModel.deviceType"
                          placeholder="设备类型"
                          clearable
                          filterable>
                          <el-option v-for="item in deviceDictionaries"
                            :key="item.dictValue"
                            :label="item.dictText"
                            :value="item.dictValue" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="设备区分"
                        label-width="120px">
                        <el-select v-model="searchModel.deviceIsLine"
                          placeholder="设备区分"
                          clearable
                          filterable>
                          <el-option v-for="item in deviceIsLineList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8"
                      style="margin-left: 10px">
                      <el-form-item>
                        <el-button type="primary"
                          icon="el-icon-search"
                          @click="toSearch"
                          style="margin-right: 10px">搜索</el-button>
                        <el-button type="info"
                          icon="el-icon-delete"
                          @click="toReset"
                          style="margin-right: 10px">重置</el-button>
                        <el-button size="small"
                          @click="getDataList">
                          <i class="el-icon-refresh"
                            style="color: #606266" />
                          <span style="color: #606266">刷新</span>
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>

      <div>
        <div style="margin-bottom: 8px">
          <el-button size="small"
            type="primary"
            style="margin-right: 20px"
            @click="toAdd({ id: -1 }, 'add')">
            <i class="iconfont icon-xinzenghuizong"
              style="font-size: 13px;margin-right: 5px" />新建联动策略
          </el-button>
          <!-- <div v-if="selectedDataList.length != 0" class="alert-div">
            <i class="el-icon-info" style="color: #1890ff; margin-right: 3px" />
            已选择
            <strong style="color: #1890ff; margin: 0px 1px; font-size: 15px">
              {{ selectedDataList.length }}
            </strong>
            项
            <el-button
              type="text"
              style="padding: 10px"
              @click="toEmptySelection"
              >清空</el-button
            >
          </div>
          <el-popover v-model="popoverVisible" placement="top" trigger="manual">
            <i class="el-icon-question" style="color: rgb(255, 153, 0)" />
            <span>
              确定要删除已选的
              <strong style="color: #1890ff; margin: 0px 1px">
                {{ selectedDataList.length }}
              </strong>
              项数据吗？
            </span>
            <div style="text-align: right; margin-top: 10px">
              <el-button size="mini" type="text" @click="popoverVisible = false"
                >取消</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="toBatchDeleteConfirm"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="toBatchDelete"
            >
              批量删除
            </el-button>
          </el-popover> -->
        </div>

        <el-table ref="elTable"
          v-loading="loading || deleteLoading"
          border
          fit
          size="medium "
          :data="dataList"
          :row-key="(row) => row.id"
          style="width: 100%"
          :element-loading-text="deleteLoading ? '删除中,请等待...' : ''"
          @sort-change="onSortChange"
          @selection-change="onSelectionChange">
          <!-- <af-table-column
            align="center"
            type="selection"
            width="40"
            fixed
            :reserve-selection="true"
          /> -->
          <el-table-column align="center"
            type="index"
            width="60"
            fixed
            label="#"
            :index="indexMethod" />

          <af-table-column align="center"
            label="设备编码">
            <template slot-scope="{ row }">
              {{ row.equipmentInfo.deviceSource }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="设备名称">
            <template slot-scope="{ row }">
              {{ row.equipmentInfo.deviceName }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="设备区分"
            prop="deviceIsLine"
            width="200">
            <template slot-scope="{ row }">
              {{
                row.equipmentInfo.deviceIsLine == 1 ? '智能无线' : '传统无线'
              }}
            </template>
          </af-table-column>
          <af-table-column align="center"
            label="设备类型">
            <template slot-scope="{ row }">
              {{ row.equipmentInfo.deviceTypeStr }}
            </template>
          </af-table-column>

          <af-table-column align="center"
            label="创建时间"
            prop="createdTime"
            sortable
            width="180">
            <template slot-scope="{ row }">
              {{ row.equipmentInfo.createdTime }}
            </template>
          </af-table-column>

          <af-table-column align="center"
            label="启用状态"
            width="150">
            <template slot-scope="{ row }">
              <el-switch v-model="row.state"
                active-color="#13ce66"
                inactive-color="#C3C8CD"
                disabled>
              </el-switch>
            </template>
          </af-table-column>
          <el-table-column align="center"
            label="操作区"
            fixed="right"
            width="150">
            <template slot-scope="{ row }">
              <el-tooltip effect="dark"
                content="编辑"
                placement="top-start">
                <i class="iconfont icon-bianji2 i-edit"
                  @click="toAdd(row, 'edit')" />
              </el-tooltip>
              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="修改启用状态"
                placement="top-start">
                <el-popconfirm :title="'确定要修改当前启用状态吗？'"
                  placement="top"
                  @confirm="toSwitchState(row)">
                  <i class="iconfont icon-- i-edit"
                    slot="reference"
                    style="font-size: 20px" />
                </el-popconfirm>
              </el-tooltip>
              <i class="iconfont icon-fengefu i-fengefu" />

              <el-tooltip effect="dark"
                content="删除"
                placement="top-start">
                <el-popconfirm :title="
                  '确定删除【' + row.equipmentInfo.deviceName + '】该设备的联动策略吗？'
                "
                  placement="top"
                  @confirm="toSingleDelete(row, '确定')"
                  @cancel="toSingleDelete(row, '取消')">
                  <i class="iconfont icon-shanchu i-delete"
                    slot="reference" />
                </el-popconfirm>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0"
          :total="total"
          :page.sync="pagination.pageNum"
          :limit.sync="pagination.pageSize"
          :page-sizes="pageSizeOptions"
          @pagination="getDataList" />
      </div>
    </el-card>
    <linkage-strategy-add v-if="addDialogObj.isVisible"
      ref="addDialog"
      :dialog-visible="addDialogObj.isVisible"
      :title="addDialogObj.title"
      :params="params"
      @close="dialogClose('addDialogObj')"
      @submit="afterSubmit" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import deviceManageApi from '@/api/device-manage'
import LinkageStrategyAdd from './component/Add'
export default {
  name: 'LinkageStrategy',
  components: {
    Pagination,
    LinkageStrategyAdd,
  },

  mixins: [dataTableMixins],
  data () {
    return {
      deleteLoading: false,
      popoverVisible: false,

      deviceDictionaries: [],
      deviceIsLineList: [
        { label: '无线设备', value: 1 },
        { label: '传统有线', value: 0 },
      ],
    }
  },
  created () { },
  mounted () {
    this.getDictValueAttr()
  },
  methods: {
    getDictValueAttr () {
      const data = {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }
      deviceManageApi.getDictValueAttr(data).then((ret) => {
        this.deviceDictionaries = ret.data.dictValue
        this.getDataList()
      })
    },
    getDataList () {
      this.loading = true

      const searchModel = this.formatSearchData(this.searchModel)
      searchModel.isNeedEqupmentMsg = true
      deviceManageApi
        .getTriggerList({ ...this.pagination, ...searchModel, ...this.sort })
        .then((ret) => {
          this.dataList = ret.data.data.rows

          this.dataList.forEach((ele, i) => {
            // this.selectedDataList.forEach((multEle, j) => {
            //   if (this.dataList[i].id === this.selectedDataList[j].id) {
            //     this.$refs.elTable.toggleRowSelection(this.dataList[i], true)
            //   }
            // })

            this.deviceDictionaries.forEach((ele1, i1) => {
              if (Number(ele.equipmentInfo.deviceType) === ele1.dictValue) {
                ele.equipmentInfo.deviceTypeStr = ele1.dictText
              }
            })

            ele.state = ele.state == 1 ? true : false
          })
          this.total = ret.data.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch () {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset () {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSortChange (val) {
      console.log(val)
      this.sort.field = val.prop
      this.sort.order = val.order
      this.toSearch()
    },
    onSelectionChange (selection) {
      this.selectedDataList = selection
    },
    toEmptySelection () {
      this.$refs.elTable.clearSelection()
    },
    indexMethod (index) {
      return this.formatIndex(index, this.pagination)
    },
    toBatchDelete () {
      if (this.selectedDataList.length === 0) {
        this.$message({
          message: '请先选择需要删除的数据',
          type: 'warning',
          duration: 4000,
        })
        return
      } else {
        this.popoverVisible = true
      }
    },
    toBatchDeleteConfirm () {
      this.popoverVisible = false
      const ids = []
      this.selectedDataList.forEach((ele) => {
        ids.push(ele.id)
      })
      this.deleteConfirm(ids)
    },
    toSingleDelete (data, type) {
      if (type === '确定') {
        this.deleteConfirm(data.id)
      }
    },
    deleteConfirm (ids) {
      console.log('删除ids', ids)
      this.deleteLoading = true
      deviceManageApi
        .deleteTrigger({ id: ids })
        .then(() => {
          this.$message.success('删除成功！')
          this.deleteLoading = false
          this.toEmptySelection()
          this.toReset()
        })
        .catch(() => {
          this.deleteLoading = false
        })
    },
    toDetail (data) {
      this.params = {
        item: data,
      }
      this.detailDialogObj.title = '联动策略 ＞详情'
      this.detailDialogObj.isVisible = true
    },
    toAdd (data) {
      this.params = {
        item: data,
      }
      this.addDialogObj.title =
        data.id === -1 ? '联动策略 ＞添加' : '联动策略 ＞编辑'
      this.addDialogObj.isVisible = true
    },
    afterSubmit (operationType) {
      if (operationType === 'add') {
        this.toReset()
      } else {
        this.getDataList()
      }
    },
    toSwitchState (data) {
      const state = data.state ? 0 : 1
      const model = {
        id: data.id,
        state: state,
      }

      deviceManageApi.updateTrigger(model).then((res) => {
        this.$message({
          message: '更改状态成功！',
          type: 'success',
        })
        this.getDataList()
      })
    },
  },
}
</script>



<style lang="scss"  scoped>
@import '../../../../styles/part-custom';
</style>

